<template>
  <nly-content-wrapper>
    <nly-content>
      <a-tabs type="card" style="margin-top: 40px; height: 100%;" @change="tabChange">
        <a-tab-pane key="1" tab="商品订购">
          <nly-row class="ml-1 mb-2 lr mt-4"></nly-row>
          <div style="height: calc(100vh - 12rem);overflow: auto; margin: 0" >
            <div  style="width: 100%;">
              <a-row :gutter="16" style="margin-top: 20px; display: flex; justify-content: center;">
                <a-col class="gutter-row" :span="6" v-for="(item, index) in data" v-show="index <= 2" :key="index">
                  <div class="gutter-box">
                    <div style="margin-top: 10px;">
                      <img src="@/assets/image/order.png" />
                    </div>
                    <div style>
                      <label>{{item.goodsName}}</label>
                    </div>
                    <div>
                      产品简介:  {{item.remarks}}
                    </div>
                  </div>
                </a-col>
              </a-row>
              <a-row :gutter="16" style="margin-top: 20px; display: flex; justify-content: center;">
                <a-col class="gutter-row" :span="6" v-for="(item, index) in data" v-show="index >= 3" :key="index">
                  <div class="gutter-box">
                    <div style="margin-top: 10px;">
                      <img src="@/assets/image/order.png" />
                    </div>
                    <div style>
                      <label>{{item.goodsName}}</label>
                    </div>
                    <div>
                      产品简介:  {{item.remarks}}
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </nly-content>
  </nly-content-wrapper>
</template>

<script>
import { pageList } from "@/api/member/goods";
import { configList } from "@/api/member/config";
import { getOrderDetail, deleteOrder, aliPay, wxPay, saveOrder } from "@/api/member/order";

const basePostData = {
  current: 1,
  size: 20
};

export default {
  data() {
    return {
      orderId: "",
      orderPayVisible: false,
      wxPayVisible: false,
      payMethod: 1,
      tabKey: 1,
      postData: { ...basePostData },
      data: [],
      buyVisible: false, //购买商品弹窗
      agreeCheck: false, //支付条款
      goodsInfo: {},
      discountRate: 0,
      payCodeImg: "",
      config: []
    };
  },
  mounted() {
    this.getConfigList();
    this.PageList();
  },
  methods: {
    //tab 切换
    tabChange(key) {
      console.log(key);
      this.tabKey = key;
      this.PageList();
    },
    //商品配置
    getConfigList() {
      configList().then(response => {
        if (response.code == 200) {
          this.config = response.data;
          console.log(this.config);
        }
      });
    },
    //获取商品列表
    PageList() {
      const { postData } = this;
      pageList(postData)
        .then(response => {
          if (response.code === 200) {
            const { data } = response;
            const { records, total, current, size } = data;
            this.data = records;
          }
        })
        .catch(error => {});
    },
    gotoPayUrl(response) {
      var win = window.open("", "支付");
      win.document.open();
      win.document.write(response);
      win.document.close();
      this.orderPayVisible = false;
      this.wxPayVisible = false;
      this.buyVisible = false;
    },
  },
  watch: {}
};
</script>
<style scoped>
.form-inline label {
  justify-content: left !important;
}
.form-inline > .col {
  margin-bottom: 1.5rem !important;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
.gutter-box {
  border: 3px #c0c0c0 solid;
  padding: 5px 0;
  max-width: 250px;
  height: 330px;
  text-align: center;
}
.googs-ul{
  text-align: left;
  margin-left: 20px;
  margin-top: 20px;
}
.buy-div{
  width: 100px;
  height: 30px;
  background: #00a0e9;
  margin: auto;
  text-align: center;
  line-height: 30px;
  border-radius: 20px;
  color: #f2f2f2;
  cursor: pointer;
}
</style>
